var OrderInfoSetting = function () {
  var QrcodeImg = function () {
    var template = /* html */ `
      <div class="qrcode-img">
        <div ref="qrCode" class="qrcode-img-div" v-if="isShow">
        </div>
        <img v-if="imgUrl!==''" :src="imgUrl" fit="scale-down" class="qrcode-img-display"/>
      </div>
    `;

    return {
      props: {
        orderNo: {
          type: String,
          required: true
        }
      },

      watch: {
        orderNo: function () {
          this.toCreateCode();
        },

        qrcodeSize: function () {
          this.toCreateCode();
        }
      },

      data: function () {
        return {
          isShow: true,
          imgUrl: '',
          qrcodeSize: null,
          isShow: false
        };
      },

      mounted: function () {
        this.setQrcodeSize();

        var self = this;
        $(this.$el).resize(function () {
          self.setQrcodeSize();
        });
      },

      methods: {
        setQrcodeSize: function () {
          var $el = $(this.$el);
          var width = $el.width();
          var height = $el.height();
          var size = Math.min(width, height);
          if (size < 50) {
            size = 50;
          }
          this.qrcodeSize = size;
        },

        toCreateCode: function () {
          this.isShow = true;
          var self = this;
          this.$nextTick(function () {
            self.createQrcode();
            setTimeout(function () {
              self.drawQrcode();
              self.isShow = false;
            }, 100);
          });
        },

        createQrcode: function () {
          var qrcodeSize = this.qrcodeSize;
          var qrCodeEl = this.$refs['qrCode'];
          var orderNo = this.orderNo;

          new QRCode(qrCodeEl, {
            text: `http://www.shinehao.net/weixin/weiXin/sh?orderId=${orderNo}`,
            width: qrcodeSize,
            height: qrcodeSize,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.L
          });
        },

        drawQrcode: function () {
          var imgDom = $(this.$el).find('.qrcode-img-div img')[0];
          this.imgUrl = imgDom.src;
        }
      },

      template: template
    };
  }();

  var template = /* html */ `
    <div class="order-info-setting" :class="{'is-resize':isResize}" @mousemove="handleMouseMove" @mousedown="handleMouseDown"
      v-loading.fullscreen.lock="loading">
      <div class="order-info-setting-btns" v-if="!isPrint">
        <el-button size="mini" type="primary" @click="toSettingConfig">配置</el-button>
      </div>
      <table cellspacing="0" cellpadding="0" ref="orderInfoTable">
        <template v-for="width in orderInfoConfig.widthList">
          <col :width="width">
        </template>

        <template v-for="(rowCount,rowIndex) in orderInfoConfig.rowNum">
        <tr :key="'row_'+rowIndex">
          <template v-for="(colCount,colIndex) in orderInfoConfig.colNum">
          <td :key="'col-label_'+colIndex">
            <span>{{getOrderLabel(rowIndex,colIndex)}}</span>
          </td>
          <td :key="'col-value_'+colIndex" :class="{'has-update':checkUpdate(rowIndex,colIndex)}">
            <template v-if="mode!=='test'">
            <template v-if="orderFieldList[rowIndex][colIndex]!==null">
              <template v-if="orderFieldList[rowIndex][colIndex]==='proDept'">
                <span v-if="isPrint">{{deptName}}</span>
                <el-select v-else filterable v-model="data.proDept" style="width:100%" size="mini">
                  <el-option v-for="item in deptList" :key="'dept_'+item.id" :value="item.id" :label="item.name" :disabled="item.status===0">
                  </el-option>
                </el-select>
              </template>
              <template v-else-if="orderFieldList[rowIndex][colIndex]==='orderTime'">
                <span v-if="isPrint">{{data.orderTime?moment(data.orderTime).format('YYYY-MM-DD'):''}}</span>
                <el-date-picker v-else clearable v-model="data.orderTime" type="date" value-format="timestamp" style="width:100%" size="mini">
                </el-date-picker>
              </template>
              <template v-else-if="getInputType(orderFieldList[rowIndex][colIndex])==='input'">
                <span v-if="isPrint">{{data[orderFieldList[rowIndex][colIndex]]}}</span>
                <el-input v-else v-model="data[orderFieldList[rowIndex][colIndex]]" style="width:100%" size="mini"></el-input>
              </template>
              <span v-else>{{data[orderFieldList[rowIndex][colIndex]]}}</span>
            </template>
            </template>
          </td>
          </template>
          <td v-if="rowIndex===0" class="order-qrcode no-resize" :rowspan="orderInfoConfig.rowNum">
            <qrcode-img :order-no="data.sysOrderNo"></qrcode-img>
          </td>
        </tr>
        </template>
      </table>
      <div v-show="dragging" :style="{left:proxyWidth+'px'}" class="table-resize-proxy"></div>
    </div>
  `;

  return {
    mixins: [tableResizeMixin()],

    props: {
      config: {
        type: Object,
        required: true
      },
      data: Object
    },

    inject: {
      templProp: {
        default: function () {
          return {};
        }
      }
    },

    computed: {
      orderInfoConfig: function () {
        return this.config.orderInfo;
      },
      mode: function () {
        return this.data.mode;
      },
      isPrint: function () {
        return this.templProp.isPrint;
      },
      isEmphasize: function () {
        return this.templProp.isEmphasize;
      },
      orderFieldList: function () {
        return this.orderInfoConfig.getOrderFieldList();
      },
      deptName: function () {
        var deptList = this.deptList;
        if (deptList.length === 0) {
          return '';
        }
        var deptId = this.data.proDept;
        if (deptId === '') {
          return '';
        }
        var dept = _.find(deptList, {
          id: deptId
        });
        if (dept === undefined) {
          return '';
        }
        return dept.name;
      }
    },

    watch: {
      'orderInfoConfig.colNum': function () {
        var self = this;
        this.$nextTick(function () {
          self.resetWidthList();
        });
      }
    },

    data: function () {
      return {
        loading: false,
        deptList: []
      };
    },

    created: function () {
      if (this.mode === 'test') {
        return;
      }
      this.setDeptList();
    },

    mounted: function () {
      this.tableEl = this.$refs['orderInfoTable'];

      if (!this.config.useDefault) {
        return;
      }
      var self = this;
      setTimeout(function () {
        self.resetWidthList();
      }, 200);
    },

    methods: {
      setDeptList: function () {
        this.loading = true;
        var self = this;
        ajaxRequest('createOrder/selectOnlineByType', {
          type: 'order_p_deptid'
        }).then(function (deptList) {
          var deptId = self.data.proDept;
          deptList = _.filter(deptList, function (dept) {
            if (dept.status === 1) {
              return true;
            }
            return deptId === dept.id;
          });
          self.deptList = deptList;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetWidthList: function () {
        var $table = $(this.$refs['orderInfoTable']);
        var $col = $table.find('tr:eq(0) td');
        var widthList = [];
        for (var i = 0; i < $col.length; i++) {
          var $td = $($col[i]);
          var width = $td.width();
          widthList.push(width + 2);
        }
        this.orderInfoConfig.widthList = widthList;
      },

      getOrderLabel: function (rowIndex, colIndex) {
        return this.orderInfoConfig.getOrderLabel(rowIndex, colIndex);
      },

      resizeWidth: function (index, value) {
        var widthList = this.orderInfoConfig.widthList;
        widthList[index] += value;
        widthList[index + 1] -= value;
      },

      toSettingConfig: function () {
        this.$emit('setting-config', {
          dialogTitle: '订单信息设置',
          dialogType: 'orderInfo'
        });
      },

      checkUpdate: function (rowIndex, colIndex) {
        if (!this.isEmphasize) {
          return false;
        }
        var orderFieldList = this.orderFieldList;
        var field = orderFieldList[rowIndex][colIndex];
        return this.data.checkUpdate(field);
      },

      getInputType: function (field) {
        var fields = ['custNo', 'orderSerialNo', 'busNo', 'busUser', 'frameType', 'proSize', 'printSize', 'punchLegSize', 'punchKnifeNo',
          'coreSize', 'qualityType'
        ];
        if (fields.indexOf(field) !== -1) {
          return 'input';
        }
        return '';
      }
    },

    components: {
      QrcodeImg: QrcodeImg
    },

    template: template
  };
}();
